<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="demo">
        <!-- 1. 插值语法只能给标签内容赋值，不能给标签的属性赋值 -->
        <p>username:{{username}}</p>
        <p>
            <h3>v-bind 给元素标签绑定属性</h3>
            <!-- html标签本身有的属性 -->
            <a v-bind:href="url">{{name}}</a>
            <!-- 自定义属性也可以绑定 -->
            <a v-bind:xx="url">xxxxx</a>
            <!-- 自定义指令中可以填js表达式 -->
            <p v-bind:aa="1+1">js表达式</p>
            <p v-bind:bb="url.toUpperCase()">js表达式二</p>
            <h3>v-bind的简写形式</h3>
            <p :href="'url123123'">简写</p>
            <a :href="url">{{name}}</a>
        </p>
        

        <!-- 2. 指令: 指令都是以v-开头的，  v-bind:xxx=""  v-model:xxx=""   
            指令：可以给标签内容赋值、属性、绑定事件 等等
            使用指令给属性赋值：v-bind:属性名="值"
        -->

    </div>
    <script>
        new Vue({
            el: '#demo',
            data: {
                username:'atguigu',
                url:'http://baidu.com',
                name:'百度'
            }
        })
    </script>
</body>

</html>